<template>
  <div class="menu">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
    >
      <template v-for="item in menu" :key="item.path">
        <el-sub-menu v-if="item.children && item.children.length" :index="item.path">
          <template #title>
            <span>{{ item.name }}</span>
          </template>
          <el-menu-item
            v-for="child in item.children"
            @click="routerTo(child.path)"
            :key="child.path"
            :index="child.path"
            >{{ child.name }}</el-menu-item
          >
        </el-sub-menu>
        <el-menu-item v-else @click="routerTo(item.path)" :index="item.path">{{
          item.name
        }}</el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { useMenu } from './index'
import { useRouter, type RouteLocationRaw } from 'vue-router'
const menu = useMenu()
const router = useRouter()
console.log(menu.value)

const routerTo = (path: RouteLocationRaw) => {
  if (path === '/chat') {
    const item = menu.value.find((item) => item.path === path)
    if (item?.children && item.children.length) {
      path = item.children[0].path
      router.push(path)
    } else {
      ElMessage.info('先创建对话吧')
    }
  } else {
    router.push(path)
  }
}
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style lang="scss" scoped>
.menu {
  width: 240px;
  height: 100%;
  :deep(.el-menu) {
    height: 100%;
  }
}
</style>
